What is the purpose of the 'defaultProps' property in a React component?
The 'defaultProps' property allows you to set default values for props if they are not explicitly provided when the component is used. This ensures that the component behaves as expected even if certain props are missing.
Scenario Questions
- 1
How would you add a defaultProps object to a functional component that receives a 'title' prop?
- 2
If a parent component omits a prop that you defined in defaultProps, what will the child component receive?
- 1
We migrated a class component that used defaultProps to a function component with hooks, but the defaults stopped working. How would you investigate and fix the issue?
- 2
Why might destructuring props in the function signature cause defaultProps to be ignored, and how can you work around it?
- 1
When building a shared component library, would you prefer defaultProps or default parameters for setting defaults, considering tree‑shaking and TypeScript support? Explain your reasoning.
- 2
Discuss any performance or bundle‑size implications of relying on defaultProps in a server‑side rendered React app.
- 1
Our legacy codebase heavily uses defaultProps in class components, but we’re moving to a fully typed functional architecture across several teams. What migration strategy would you propose to replace defaultProps while minimizing breakage?
- 2
How would you set up linting or codemod tooling to enforce a consistent approach to default values across a monorepo that contains both JavaScript and TypeScript React components?
Follow-up Questions
- ❓How would you test that the default values are correctly applied?
- ❓What are the trade‑offs between using defaultProps and default parameters?
- ❓Can you describe any pitfalls when using defaultProps with destructured props?